<script setup>
import { ref } from 'vue'
// import { Edit } from '@element-plus/icons-vue'
// import { placeholderSign } from 'element-plus/es/components/table-v2/src/private'
import {
  defectGetListService,
  // GetDefectExcelService
  getClothCondition
} from '../../api/clothrequest'
import SelectPlant from './components/SelectPlant.vue'
import SelectMathine from './components/SelectMathine.vue'
import SelectCloth from './components/SelectCloth.vue'
import SelectWorkShop from './components/SelectWorkShop.vue'
import { changTime } from '@/utils/format.js'
import { useParms } from '@/stores'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const defectList = ref([])
const day = ref([])
const total = ref(0)
const url = ref()
const clothUrl = ref()
const params = ref({
  pageCurrent: 1, // 当前页
  pageSize: 20, // 当前生效的每页条数
  id: '',
  factoryId: '', //厂房号
  checkStartDate: '', //搜索开始时间
  checkEndDate: '', //搜索结束时间
  deviceCode: '', //机台号
  clothCode: '' //布匹编号
})
const checkDate = ref()
// 布匹数据
const clothCondition = ref([])
// 重置搜索数据
const useparms = useParms()
useparms.emptyParams()
const loading = ref()
const smallLoading = ref()
const dialogVisible = ref(false)
// 获取疵点数据
const getdefectList = async () => {
  loading.value = true
  const res = await defectGetListService(params.value)
  if(res.data.data===null){
    defectList.value=[]
    total.value=0
    loading.value=false
  }
  url.value = `http://8.134.153.179/MMZN/MES/download?userName=${userStore.user.userName}&checkDate=${params.value.checkDate}&clothCode=${params.value.clothCode}&deviceCode=${params.value.deviceCode}`
  defectList.value = res.data.data.records
  total.value = Number(res.data.data.total)
  console.log(total.value)
  loading.value = false
}
getdefectList()

const onCurrentChange = (page) => {
  // 更新当前页
  params.value.pageCurrent = page
  console.log(params)
  // 基于最新的当前页，渲染数据
  getdefectList()
}
// 搜索逻辑 => 按照最新的条件，重新检索，从第一页开始展示
const onSearch = () => {
  console.log(params.value)
  params.value.pageCurrent = 1 // 重置页面
  if (checkDate.value) {
    params.value.checkStartDate = changTime(checkDate.value[0])
  }
  if (checkDate.value) {
    params.value.checkEndDate = changTime(checkDate.value[1])
  }
  console.log(checkDate.value)
  getdefectList()
}
const changeTime = ($event) => {
  day.value = $event
  console.log($event[0])
  useparms.params.checkStartDate = changTime($event[0])
  useparms.params.checkEndDate = changTime($event[1])
  console.log(useParms.params)
}
// 获得布匹数据
const clothnumber = async (row) => {
  console.log(row)
  const res = await getClothCondition({ clothCode: row })
  clothUrl.value = `http://8.134.153.179:8605/MES/download/byClothCode?userName=${userStore.user.userName}&clothCode=${row}`
  // console.log(clothCondition.value)
  console.log(res.data)
  clothCondition.value[0] = res.data.data
  dialogVisible.value = true
}
// 重置逻辑 => 将筛选条件清空，重新检索，从第一页开始展示
const onReset = () => {
  params.value.pageCurrent = 1 // 重置页面
  params.value.factoryId = ''
  params.value.id = ''
  params.value.deviceCode = ''
  params.value.clothCode = ''
  checkDate.value = ''
  params.value.checkStartDate = ''
  params.value.checkEndDate = ''
  getdefectList()
}
// 下载疵点excel表格
</script>

<template>
  <page-container title="疵点管理" class="container">
    <template #extra>
      <el-button class="install-button">
        <el-link :underline="false" class="link" :href="url"
          >下载疵点表格</el-link
        >
      </el-button>
    </template>

    <el-form inline>
      <el-form-item v-if="userStore.user.roleId === 1" label="厂房编号:">
        <select-plant v-model="params.factoryId"></select-plant>
      </el-form-item>
      <el-form-item
        v-if="
          userStore.user.roleId === 1 ||
          userStore.user.roleId === 2 ||
          userStore.user.roleId === 3
        "
        label="车间号:"
      >
        <select-work-shop v-model="params.id" style="width: 100px"></select-work-shop>
      </el-form-item>
      <el-form-item label="机台号:">
        <select-mathine v-model="params.deviceCode" style="width: 150px"></select-mathine>
      </el-form-item>

      <el-form-item label="布匹编号:">
        <select-cloth v-model="params.clothCode" style="width: 150px"></select-cloth>
      </el-form-item>
      <el-form-item label="检测时间:">
        <el-date-picker
          v-model="checkDate"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          type="datetimerange"
          size="default"
          @change="changeTime($event)"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" class="select-button">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="defectList"
      style="width: 100%"
      height="550px"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="布匹编号" width="180px">
        <template #default="{ row }">
          <el-button type="text" @click="clothnumber(row.clothCode)">{{
            row.clothCode
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="疵点">
        <template #default="{ $index }">
          <div style="display: flex; align-items: center">
            <el-image
              :src="defectList[$index].url"
              :preview-src-list="defectList[$index].url.split()"
              :preview-teleported="true"
              :initial-index="0"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="defectName" label="疵点名称"></el-table-column>

      <el-table-column prop="deviceCode" label="机台号"></el-table-column>
      <el-table-column prop="checkDate" label="检测时间"></el-table-column>
      <el-table-column prop="circleNum" label="圈数"></el-table-column>
      <el-table-column prop="isStop" label="是否停机"></el-table-column>
      <el-table-column
        prop="defectProbability"
        label="瑕疵概率"
      ></el-table-column>
      <el-table-column prop="coordinate" label="疵点坐标"></el-table-column>
      <el-table-column prop="weaver" label="织布人"></el-table-column>
      <el-table-column prop="clothInspector" label="验布人"></el-table-column>
      <!-- 没有数据 -->
      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>
    </el-table>
    <!-- 布匹情况 -->
    <el-dialog
      v-model="dialogVisible"
      title="布匹情况"
      width="60%"
      height="400px"
    >
      <el-table
        v-loading="smallLoading"
        :data="clothCondition"
        style="width: 100%"
      >
        <el-table-column prop="clothCode" label="布匹编号"> </el-table-column>
        <el-table-column prop="factoryName" label="厂房"></el-table-column>
        <el-table-column prop="workShopName" label="车间"></el-table-column>
        <el-table-column prop="deviceCode" label="机台"></el-table-column>
        <el-table-column prop="deductPoints" label="扣分"></el-table-column>
        <el-table-column
          v-if="clothCondition[0].shuangChouZhen"
          prop="shuangChouZhen"
          label="双抽针"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].kongDong"
          prop="kongDong"
          label="孔洞"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].zhongXiang"
          prop="zhongXiang"
          label="纵向"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].banDian"
          prop="banDian"
          label="斑点"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].zhenLu"
          prop="zhenLu"
          label="针路"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].diaoBu"
          prop="diaoBu"
          label="掉布"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].buGuiZe"
          prop="buGuiZe"
          label="不规则"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].louZhen"
          prop="louZhen"
          label="漏针"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].lanZhen"
          prop="lanZhen"
          label="烂针"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].xianCi"
          prop="xianCi"
          label="线疵"
        ></el-table-column>
        <el-table-column
          v-if="clothCondition[0].hengXiang"
          prop="hengXiang"
          label="横向"
        ></el-table-column>
        <!-- 没有数据 -->
        <template #empty>
          <el-empty description="没有数据"></el-empty>
        </template>
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button class="cloth-button">
            <el-link :underline="false" class="link" :href="clothUrl"
              >下载布匹表格</el-link
            >
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-pagination
      v-model:current-page="params.pageCurrent"
      :page-size="params.pageSize"
      pager-count="2"
      background
      layout="jumper, total, prev, pager, next"
      :total="total"
      @current-change="onCurrentChange"
      style="margin-top: 50px; justify-content: flex-end"
    />
  </page-container>
</template>

<style lang="scss" scoped>
.container {
  border-radius: 20px;
  font-weight: bold;
  font-size: 17px;
}
.select-button {
  background-color: #077aee;
  color: #fff;
}
.install-button {
  background-color: #077aee;
  font-weight: bold;
  color: #fff;
}
.link {
  color: #fff;
  font-weight: bold;
}
.el-button--text {
  color: #077aee;
  font-weight: 800;
}
.cloth-button {
  background-color: #077aee;
  font-weight: bold;
  color: #fff;
}
</style>
